<template>

	<view class="video" v-for="item in list" :key="item.id">

		<view class="top">
			<view>
				<van-checkbox :value="item.checked" @change="onChange(item)"></van-checkbox>
			</view>
			<view class="topLeft">
				<img class="img" :src="item.movie.image" alt="">
			</view>
			<view class="topMidle">
				<view class="title">
					{{item.movie.name}}
				</view>

				<view class="type">
					{{item.movie.type ? item.movie.type:"无"}}
				</view>
				<view class="row2">
					<view class="type">
						数量：X {{item.count}}
					</view>
				</view>
			</view>
			<view class="topRight">
				<button class="btn1">详情</button>
				<!-- <van-stepper v-model="item.count" @change="(e)=onChangeNum(e,item)"  /> -->
			</view>
		</view>
		<view class="bottom">
			<p><span class="reason">推荐理由：</span>
				<span class="txt">{{item.movie.reason}} </span>
			</p>
		</view>

	</view>
	<view class="loadMore">
		<view v-if="loading" class="info">加载中...</view>
		<view v-else-if="finished" class="info">没有更多数据</view>
		<view v-else class="button1" @click="loadMore()">加载更多</view>
	</view>
	<view style="min-height: 100px"></view>
	<van-submit-bar :price="priceAll*100" button-text="提交订单" @submit="onSubmit" >
	全选：<van-checkbox :value="checkedAll" @change="onCheckedAll()"></van-checkbox>
	</van-submit-bar> 
</template>

<script>
	import {
		post
	} from '@/lib/index.js'
	// import post from '@/lib/post.js';
	export default {
		data() {
			return {
				list: [], // 电影列表
				pageNo: 0, // 页数
				pageSize: 3, // 页距
				loading: false, // 是否加载
				finished: false, // 是否全部加载
				ischeckedAll: false,
			}
		},
		onLoad() {
			uni.$on('refreshCartList', this.refreshList)
			// 页面加载的什么周期
			this.getList()
		},
		methods: {
			async getList() {
				// 获取电影列表
				this.loading = true
				const data = await post('/list/movieCart', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sort: {
						createTime: -1
					}, // 创建时间越早的排在前面
				})
				this.loading = false
				if (!data.success) {
					return uni.showModal({
						content: data.message
					})
				}
				const finished = data.result.list.length < this.pageSize // 如果当前拉取的数据个数小于pageSize，说明拉取完成
				this.finished = finished
				// data.result.list = data.result.list
				this.list = [...this.list, ...data.result.list.map(o => ({
					...o,
					checked: false,
					price: 50
				}))] // 追加数据
				if (this.finished === false) {
					this.pageNo++
					this.getList()

				}
				console.log(this.list);
			},
			loadMore() {
				// 加载更多
				this.pageNo++
				this.getList()
			},
			refreshList() {
				this.pageNo = 0,
					this.list = [],
					this.getList()
					console.log('页面已经刷新');
			},
			onChange(item) {
				item.checked = !item.checked
			},
			onCheckedAll(){
				this.checkedAll = !this.checkedAll
			},
			// onChangeNum(event,item){
			// 	// console.log(event.detail);
			// 	console.log(event);
			// 	console.log(item);
			// 	// item.count++
			// },
			add(){
				console.log(123123123123);
			},
		// 	async onSubmit() { // 提交订单
		// 	      const params = {
		// 	        fee: this.priceAll, // 总价
		// 	        list: this.list.filter(o=>o.checked !== false).map(o=>({ count: o.count, movieId: o.movieId })),
		// 	      };
		// 	      const funcs = [];
		// 	      // return console.log('=================params', params);
		// 	      const data = await post('/create/movieOrder', params);
		// 	      if (!data.success) {
		// 	        return uni.showModal({ content: data.message });
		// 	      }
			
		
			   
			
		// 	      // 购买成功，刷新订单
		// 	      uni.$emit('refreshOrderList');
		// 	      uni.showModal({ content: '购买成功' });
		// 	    },
		 async onSubmit() { // 提交订单
		      const params = {
		        fee: this.totalFee, // 总价
		        list: this.list.map(o=>({ count: o.count, movieId: o.movieId })),
		      };
		      const funcs = [];
		      // return console.log('=================params', params);
		      const data = await post('/create/movieOrder', params);
		      if (!data.success) {
		        return uni.showModal({ content: data.message });
		      }
		
		      /*第一个方法*/
		      for (const item of this.list) {
				  console.log(item.checked,'7777777777777777777777777');
		        if (item.checked) {
		          // 执行异步操作，无需等待
		          funcs.push(post('/remove/movieCart', { id: item.id }));
		        }
		      }
		      // 等待所有的结束后去刷新列表
		      Promise.all(funcs).then(()=>{ 
		        this.refreshList();
		      });
		      /**/
		      /*第二个方法*
		      (async () => {
		        for (const item of this.list) {
		          if (item.selected) {
		            // 执行异步操作，无需等待
		            await post('/remove/movieCart', { id: item.id });
		          }
		        }
		        this.refreshList();
		      })();
		      /**/
		
		      // 购买成功，刷新订单
		      uni.$emit('refreshOrderList');
		      uni.showModal({ content: '购买成功' });
		    },
			
		},
		computed: {
			countAll() {
				return this.list.reduce((all, item) => {
					if (item.checked === true) {
						return all += item.count
					} else {
						return all
					}
				}, 0)
			},
			priceAll() {
				return this.list.reduce((all, item) => {
					if (item.checked === true) {
						return all += item.count * item.price
					} else {
						return all
					}
				}, 0)
			},
			checkedAll: {
				get() {
					return this.list.every(item => item.checked === true)
				},
				set(value) {
					this.list.forEach(item => item.checked = value)
				}
			}

		}
	}
</script>

<style>
	.checkBox {
		width: 10px;
		height: 100%;
		background-color: red;
	}

	.video {
		padding: 6px 0;
		margin: 0 10px;
		border-bottom: 1px solid #ccc;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
	}

	.topMidle {
		width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.row2 {
		display: flex;
	}

	.time,
	.favoriteNum,
	{
	color: #555;
	}

	.icon {
		width: 16px;
		height: 16px;
	}

	.type {
		margin-bottom: 10px;
		color: #555;
		font-size: 14px
	}

	.btn1 {
		font-size: 14px;
		color: #fff;
		background-color: #fb7299;
		width: 58px;
		height: 32px;
		border-radius: 4px;
		margin-left: 60px;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.topRight {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 70px;
		height: 93px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.reason {
		color: #fb7299;
		font-weight: 500;
		font-size: 14px;
	}

	.bottom .txt {
		font-size: 14px;
		color: #4c4c4c;

	}

	.bottom {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.loadMore {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 10px 0;
	}

	.info {
		font-size: 12px;
		color: gray;
	}

	.button1 {
		border: 1px dashed #d3d3d3;
		width: 80px;
		height: 30px;
		font-size: 12px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: gray;
	}
</style>